<script setup>
import { WarningFilled } from '@element-plus/icons-vue'

defineProps({
    data: {
        type: Object,
        required: true
    }
})

</script>

<template>
    <div class="contract_box">
        <div class="contract_top">
            <el-icon color="#999">
                <WarningFilled />
            </el-icon>
            <span>Are you the contract creator? <router-link
                    :to="{ path: '/verifyContract', query: { a: this.$route.params.id } }">Verify and Publish</router-link>
                your
                contract source code today!</span>
            <p v-if="data.someCount > 1">Note: We also found another {{ data.someCount }} contracts with exact matching byte
                codes</p>
        </div>
    </div>
    <div>
        <el-button type="warning" size="small">Decompile ByteCode <i class="el-icon-news"></i></el-button>
        <el-button type="warning" size="small">Switch to Opcodes View</el-button>
        <el-button type="info" size="small">Similar Contracts</el-button>
    </div>

    <div class="contract_ipt pad10" v-if="data.byteCode">
        <el-input disabled type="textarea" :autosize="{ minRows: 2, maxRows: 12 }" v-model="data.byteCode">
        </el-input>
    </div>
</template>



<style lang="less" scoped>
.contract_top {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 18px
}

.contract_ipt {
    margin-top: 15px;
    padding-bottom: 12rem;

    textarea {
        word-wrap: break-word;
        line-height: 20px;
    }

    :deep(.el-textarea__inner) {
        color: var(--color-text);
        font-size: 0.7rem;
        line-height: 1.2rem
    }
}
</style>